<template>
	<view class="p-2">
		<uni-list-item :title="item.name" v-for="(item,index) in actionList" :key="index" @click="onOpen(item.key)">
			<view v-if="item.key==='clearCache'" slot="right">{{currentSize | format}}</view>
		</uni-list-item>
		<view class="my-4">
			<button class="bg-main text-white rounded-circle border-0" type="default">退出登录</button>
		</view>
	</view>
</template>

<script>
	import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue'
	export default {
		components:{
			uniListItem
		},
		data() {
			return {
				actionList:[
					{name:'账号与安全',key:'user-password'},
					{name:'资料编辑',key:'user-userinfo'},
					{name:'清除缓存',key:'clearCache'},
					{name:'意见反馈',key:'user-feedback'},
					{name:'关于社区',key:'user-about'},
				],
				currentSize:0
			};
		},
		filters:{
			format(val) {
				return val > 1024 ? (val / l024) + 'mb' : val + 'kb'
			}
		},
		onLoad() {
			this.getStorageInfo()
		},
		methods:{
			getStorageInfo(){
				let res = uni.getStorageInfoSync()
				this.currentSize = res.currentSize
			},
			onOpen(key) {
				if(key === 'clearCache') {
					uni.showModal({
						title: '提示',
						confirmText:'清除',
						cancelText:'不清楚',
						content: '确定要清楚缓存吗？',
						success: (res)=> {
							if (res.confirm) {
								uni.clearStorage();
								this.getStorageInfo();
								uni.showToast({
									title:'清除成功'
								})
							}
						}
					});
				}else {
					uni.navigateTo({
						url:`/pages/${key}/${key}`
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">

</style>
